<template>
    <div class="code-box">
        <div class="container">
            <img src="@/assets/images/live-lock.png" alt="lock" />
                <div class="tips">
                    <p>此直播已设置观看权限，需输入密码才能观看~</p>
                    <p>请联系主讲人：<slot></slot> 获取密码</p>
                </div>
                <p class="enter-tip">输入直播密码</p>
                    <div class="input-box">
                        <template v-for="(item,index) of passCode">
                            <el-input type="number" :key="index" tabindex="index" v-model="passCode[index]" :autofocus="true" min="0" max="9" maxlength="1" @input.native="inputCode($event,index)" @keydown.native="keydown($event,index)" @keyup.native="keyup($event,index)"></el-input>
                        </template>
                    </div>
                <el-button type="primary" class="password-enter-btn" @click="enterLiveRoom">观 看</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            liveId:{
                type: Number,
                default: 0,
                require:true
            }
        },
        data() {
            return {
                passCode:[null,null,null,null,null,null],
                step:2
            };
        },
        methods: {
            // 输入框的输入事件
            //处理：输入字母e时置空，且输入的内容限制在一位数值
            inputCode(e,inx){
                let val = e.target.value.slice(0, 1);
                this.$set(this.passCode,inx,val);
                e.target.value = val;
            },
            keydown(e,inx) {
               let allInput=document.querySelectorAll('.input-box input');
                if (e.key === 'ArrowLeft') {
                    this.step=this.step-1;
                } else if (e.key === 'ArrowRight') {
                    this.step=this.step+1;
                }
            },
            keyup(e,inx) {
                let allInput=document.querySelectorAll('.input-box input');
                let filterKey=['ArrowUp','ArrowDown'];
                if (e.key === 'ArrowLeft') {
                    if (inx>0&&this.step===0) {
                        allInput[inx-1].focus();
                        this.step=2;
                    }
                } else if (e.key === 'ArrowRight') {
                    if (inx<5&&this.step===4) {
                        allInput[inx+1].focus();
                        this.step=2;
                    }
                } else if (e.key==='Backspace'){
                    if(0<inx<6){
                        this.$set(this.passCode,inx,null);
                        allInput[inx-1]&&allInput[inx-1].focus();
                    }
                }else if (e.key==='Enter'){
                    this.enterLiveRoom();
                }else if (!filterKey.includes(e.key)&&0<=inx<=4&&![null,''].includes(this.passCode[inx])) {
                    allInput[inx+1]&&allInput[inx+1].focus();
                } 
            },
            // 输入直播密码，进行校验：
            enterLiveRoom() {
                let codeStr = this.passCode.join('');
                if (codeStr == '') {
                    this.$message.warning('密码不能为空');
                    return;
                } else if (codeStr.length < 6) {
                    this.$message.warning('密码为6位数的数字,请输入完整');
                    return;
                }
                let success = res => {
                    if (res.status === 'success') {
                        this.$emit('checkFlag',true)
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                };
                this.$ajax({
                    url: 'api/live/check_live_password',
                    method: 'get',
                    params: {
                        id: this.liveId,
                        password: codeStr
                    },
                    func: {
                        success: success
                    }
                });
            },   

        },

    }
</script>
<style lang="scss">
    .code-box {
		height: 100%;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.9);
		position: relative;
        .container {
			display: inline-block;
			width: 420px;
			height: 400px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -200px;
			margin-left: -200px;
		}
        .input-box {
            padding-bottom: 30px;
            .el-input{
                width: 60px;
                height: 60px;
                padding: 0 5px;
            }
            .el-input__inner {
                border-radius: 0;
                color: #fff;
                background-color: transparent;
                border-color: transparent transparent #fff transparent;
                border-width: 1px 1px 2px 1px;
                padding: 0;
                font-size: 30px;
                text-align: center;
            }
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            
            input[type="number"] {
                -moz-appearance: textfield;
            }
        }
        .tips {
			margin-top: 52px;

			p {
				line-height: 28px;
                color: #fff;
				text-align: left;
				padding-left: 3em;
			}

			p:nth-child(1) {
				font-size: 16px;
			}

			p:nth-child(2) {
				font-size: 14px;
			}
		}

		.enter-tip {
			font-size: 12px;
			color: #cfcfcf;
			margin: 34px 0;
			text-align: left;
		}

		.password-enter-btn {
			padding: 0;
			width: 380px;
			height: 40px;
            font-size: 18px;
		}
    }
</style>